<template>
    <h2 style="text-align: center;">订单列表</h2>

    <!-- 数据显示部分 -->
    <el-table :data="Info" border style="width: 100%">
      <el-table-column prop="Order_Code" label="订单编号" width="180" align="center"/>
      <el-table-column prop="Order_From" label="订单来源" width="180" align="center"/>
      <el-table-column prop="Order_UserName" label="预订用户" width="180" align="center"/>
      <el-table-column prop="Order_Phone" label="预订电话" width="180" align="center"/>
      <el-table-column prop="Order_InTime" label="入住时间" width="180" align="center">
        <template v-slot="setup">
            <!-- <span>{{ moment(setup.row.Order_InTime).format("yyyy-MM-DD HH-mm-ss") }}</span> -->
        </template>
      </el-table-column>
      <el-table-column prop="Order_OutTime" label="离店时间" width="180"align="center" />
      <el-table-column prop="Order_Price" label="价格" width="180"align="center" >
        <template v-slot="setup">
            <span style="color: red;">￥{{ setup.row.Order_Price .toFixed(2)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="OrderStateName" label="订单状态" width="180" align="center"/>

      <!-- 操作 -->    
      <el-table-column label="操作" align="center">
        <template v-slot="setup">
            <el-button v-if="setup.row.Order_State==1" type="primary"  @click="UserCheckIn(setup.row)" style="margin-right: 10px;">入住</el-button>
            <el-button v-if="setup.row.Order_State==1" type="warning"  @click="ChangeState(setup.row.Order_Id,4,'取消订单')" style="margin-right: 10px;">取消</el-button>
            <el-button v-if="setup.row.Order_State==1" type="info"     @click="ChangeState(setup.row.Order_Id,6,'超时未入住')">超时未入住</el-button>
            <el-button v-if="setup.row.Order_State==3" type="primary"  @click="PayOrder(setup.row.Order_Id,setup.row.Order_Price)">支付</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 入住弹窗-->
    <el-dialog
        v-model="dialogVisible"
        title="办理入住"
        width="500"
        >
        <span>
            <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
            >
                <!-- 输入框 -->
                <el-form-item label="入住人" prop="Order_UserName">
                    <el-input v-model="ruleForm.Order_UserName" />
                </el-form-item>
                
                <el-form-item label="手机号码" prop="Order_Phone">
                    <el-input v-model="ruleForm.Order_Phone" />
                </el-form-item>
                <!-- 房号下拉框 -->
                <el-form-item label="房间号" prop="Order_RoomCode">
                    <el-select v-model="ruleForm.Order_RoomCode" placeholder="请选择房间号">
                        <el-option label="101" value="101" />
                        <el-option label="201" value="201" />
                    </el-select>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                    <el-button @click="resetForm(ruleFormRef)">清空</el-button>
                    <el-button @click="dialogVisible = false">关闭</el-button>
                </el-form-item>
            </el-form>
        </span>
    </el-dialog>
</template>
  
<script lang="ts" setup>
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import { ElMessage,ElMessageBox } from 'element-plus'
    import { reactive } from 'vue'
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
    import moment from 'moment';
    
    //显示响应式数据
    const Info =ref([]) 
    //生命周期钩子函数
    onMounted(()=>{
        ShowOrdes();//订单列表
    })
   
    //订单列表
    const ShowOrdes=()=>{
        axios.get("https://localhost:44377/api/Orders/ShowOrdes")
        .then(res=>{
            Info.value=res.data.Data
        })
    }

    //-------------------------入住弹框--------------------------------//
    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    //响应式数据
    const ruleForm = reactive({
        Order_UserName:"",
        Order_Phone: '',
        Order_RoomCode:'',
        Order_Id:"",
    })
    
    const dialogVisible = ref(false)
    //弹框展示入住信息
    const UserCheckIn=(info:any)=>{
        //依次获取入住人姓名、手机号码
        ruleForm.Order_Id=info.Order_Id
        ruleForm.Order_UserName=info.Order_UserName;
        ruleForm.Order_Phone=info.Order_Phone;
        dialogVisible.value=true;
    }

    const locationOptions = ['Home', 'Company', 'School']
    //验证
    const rules = reactive<FormRules>({
        Order_UserName: [
            { required: true, message: '入住人名称不能为空！', trigger: 'blur' },
        ],
        Order_Phone: [
            { required: true, message: '手机号不能为空！', trigger: 'blur' },
        ],
        region: [
            {
            required: true,
            message: '请选择房间号',
            trigger: 'change',
            },
        ],
    })
    //按钮
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return 
        await formEl.validate((valid, fields) => {
            if (valid)
            //完成用户提交的请求
            axios.post("https://localhost:44377/api/Orders/UserCheckIn",
                {
                    Order_Id:ruleForm.Order_Id,
                    Order_UserName:ruleForm.Order_UserName,
                    Order_Phone:ruleForm.Order_Phone,
                    Order_RoomCode:ruleForm.Order_RoomCode
                }
            )
            .then(res=>{
                if(res.data.Data>0)
                {
                    ElMessage.success("用户办理成功");
                    dialogVisible.value=false;
                    ShowOrdes();
                }
                else
                {
                    ElMessage.error("用户办理失败")
                }
            })
        })
    }
    // 重置
    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }
    //重置状态 Order_Id：订单编号 Order_State：订单状态 Order_Msg：提示信息（无需传后台）
    const ChangeState=(Order_Id:number,Order_State:number,Order_Msg:string)=>{
        ElMessageBox.confirm(
            '确定【'+Order_Msg+'】吗？',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '关闭',
                type: 'warning',
            }
        )
        .then(() => {
            axios.put("https://localhost:44377/api/Orders/ChangeOrderState",null,
                {
                    params:{
                        id:Order_Id,
                        state:Order_State,
                    }
                }
            )
            .then(res=>{
                if(res.data.Data>0)
                {
                    ElMessage.success("订单状态修改成功");
                    ShowOrdes();
                }
                else
                {
                    ElMessage.error("订单状态修改失败");
                }
            })
        })
    }
    //支付
    const PayOrder=(Order_Id:string,Order_Price:number)=>{
        ElMessageBox.confirm(
            '确定完成支付吗？',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '关闭',
                type: 'warning',
            }
        )
        .then(() => {
            axios.post("https://localhost:44377/api/Orders/PagePay",null,
                {
                    params:{
                        orderCode:Order_Id,
                        money:Order_Price
                    }
                }
            )
            .then(res=>{
                if(res.status==200)
                {
                    document.write(res.data)
                }
            })
        })
    }
    const options = Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
    }))
</script>
  


